import React, { useState } from 'react';
import { Button, Table,Switch,Checkbox } from 'antd';
import '../../style/Commerce/index.css'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: React.Key;
  name: string;
  title:string;
  id: number;
  address: string;
  area:string;
  sum:string;
  sort:number;
  ztai:any;
  operate:any;
}

const columns: ColumnsType<DataType> = [
    {
        title: 'ID',
        dataIndex: 'id',
      },
  {
    title: '楼盘名称',
    dataIndex: 'name',
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '面积',
    dataIndex: 'area',
  },
  {
    title: '总价',
    dataIndex: 'sum',
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  {
    title: '状态',
    dataIndex: 'ztai',
  },
  {
    title: '操作',
    dataIndex: 'operate',
  },
];

const data: DataType[] = [];
for (let i = 1; i <= 6; i++) {
  data.push({
    key: i,
    name: `碧海苑1楼500平方 ${i}`,
    id: i,
    address: `London, Park Lane no. ${i}`,
    title:`珠江俪豪写字楼300平方`,
    area:`200m`,
    sum:`400万`,
    sort:1000,
    ztai:<Switch checkedChildren="正常" unCheckedChildren="审核" defaultChecked />,
    operate:(<div><Button size="small" type="primary">编辑</Button>   <Button size="small" type="primary" danger>
    删除
  </Button></div>),
  });
}

const App: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState(false);

  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
      
      </div>
      <Table pagination={false} rowSelection={rowSelection} columns={columns} dataSource={data} />
      <div className='xf'>
      <Checkbox style={{marginLeft:"20px"}}/>
      <span style={{marginLeft:"10px",lineHeight:"40px"}}>
          全选/取消
        </span>
      <Button style={{marginLeft:"10px"}} type="primary" onClick={start} disabled={!hasSelected} danger loading={loading}>
          删除
        </Button>
      </div>
   
     
    </div>
  );
};

export default App;